﻿@model ScadaWeb.Web.Areas.Scada.Models.WebDesignerModel
<div class="modal   fade" role="dialog" id="DynamicTableModal" tabindex="-1" aria-labelledby="shareModalLabel" aria-hidden="true">
    <div class="modal-content">
        <div class="modal-header">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">×</a>
                <h3>动态表格编辑器</h3>
            </div>
            <div class="modal-body">
                <ul id="myTab" class="nav nav-tabs">
                    <li class="active">
                        <a href="#basic" data-toggle="tab">
                            基础属性
                        </a>
                    </li>
                    <li><a href="#tableset" data-toggle="tab">表格配置</a></li>
                    <li><a href="#datasource" data-toggle="tab">数据源配置</a></li>
                    <li><a href="#datasearch" data-toggle="tab">查询栏配置</a></li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="basic">
                        <div role="form" class="form-horizontal col-md-12">
                            <div class="form-group">
                                <label   class="col-sm-2 control-label">表单ID</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" readonly="readonly" id="dynamictable_ID"
                                           placeholder="请输入唯一的表单ID(英文字符加数组)">
                                </div>
                            </div>
                            <div class="form-group">
                                <label  class="col-sm-2 control-label">表格标题</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="dynamictable_Title"
                                           placeholder="请输入表格标题">
                                </div>
                            </div>
                            <div class="form-group">
                                <label  class="col-sm-2 control-label">表格高度</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="dynamictable_Height"
                                           placeholder="请输入表格高度数值(像素100-1000)">
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="tab-pane fade" id="tableset">
                        <div role="form" class="form-horizontal col-md-12">
                            <div class="form-group">
                                <label  class="col-sm-2 control-label">数据Id列</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="dynamictable_KeyId"
                                           placeholder="(填写对应的表字段Id)">
                                </div>
                            </div>
                            <div class="form-group">
                                <label  class="col-sm-2 control-label">显示工具条</label>
                                <div class="col-sm-10">
                                    <div class="checkbox">
                                        <label propertyeditable="true">
                                            <input type="checkbox" id="dynamictable_toolenable" value="1" checked>开启
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label  class="col-sm-2 control-label">显示分页</label>
                                <div class="col-sm-10">
                                    <div class="checkbox">
                                        <label propertyeditable="true">
                                            <input type="checkbox" id="dynamictable_pagenable"  value="1" checked>开启
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label  class="col-sm-2 control-label">每页数量</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="dynamictable_pagesize"
                                           placeholder="填写每页数量">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="datasource">
                        <div role="form" class="form-horizontal col-md-12">
                            <div class="form-group">
                                <label   class="col-sm-2 control-label">选择数据源</label>
                                <div class="col-sm-10">
                                    <select type="text" class="form-control" id="dynamictable_DataSource">
                                        <option value="">请选择数据源</option>
                                        @for (var i = 0; i < Model.DataSources.Count; i++)
                                        {
                                            <option value="@Model.DataSources[i].Id">@Model.DataSources[i].DBTitle [@Model.DataSources[i].DBType]</option>
                                        }
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="elementName" class="col-sm-2 control-label">SQL语句配置</label>
                                <div class="col-sm-10">
                                    <textarea rows="10" style="width:100%" placeholder="例如:    select r1,r2,r3,r4,r5 from table where 1=1" id="dynamictable_Sql">
                             
                                    </textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <label  class="col-sm-2 control-label">数据列配置</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="table_column_title" placeholder="列标题" />
                                    <input type="text" id="table_column_record" placeholder="列字段" class="form-control"/>
                                    <button type="button" id="table_column_add" class="btn btn-success" >添加列</button>
                                    <button type="button" id="table_column_del" class="btn btn-success">删除列</button>
                                    <button type="button" id="table_column_empty" class="btn btn-success">清空列</button>
                                </div>
                            </div>
                            <div class="form-group">
                                <label   class="col-sm-2 control-label">已存在数据列</label>
                                <div class="col-sm-10">
                                    <select multiple style="height:200px;width:100%;"  id="table_columns" ></select>
                                </div>
                            </div>
                             
                            <div class="form-group">
                                <label for="elementName" class="col-sm-2 control-label">测试</label>
                                <div class="col-sm-4">
                                    <button type="button" id="testDatasource" class="btn btn-success">点击测试</button>
                                </div>
                                <div class="col-sm-4">

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="datasearch">
                        <div role="form" class="form-horizontal col-md-12">
                            <div class="form-group">
                                <label for="elementName" class="col-sm-2 control-label">查询下拉框一 SQL语句配置</label>
                                <div class="col-sm-10">
                                    <textarea rows="10" style="width:100%" placeholder="例如:  select value as value,text as text from table where 1=1" id="table_select1_sql">
                             
</textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="elementName" class="col-sm-2 control-label">列表Value字段</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="table_select1_value_record"
                                           placeholder="下拉框value值">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="elementName" class="col-sm-2 control-label">列表Text字段</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="table_select1_text_record"
                                           placeholder="下拉框显示的字段">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="elementName" class="col-sm-2 control-label">对应查询表的字段</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="table_select1_record"
                                           placeholder="(对应查询表的字段)">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="elementName" class="col-sm-2 control-label">开启下拉框一</label>
                                <div class="col-sm-10">
                                    <div class="checkbox">
                                        <label propertyeditable="true">
                                            <input type="checkbox" id="table_select1_enable">开启下拉框一
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="elementName" class="col-sm-2 control-label">查询下拉框二 SQL语句配置</label>
                                <div class="col-sm-10">
                                    <textarea rows="10" style="width:100%" placeholder="例如:  select value as value,text as text from table where 1=1" id="table_select2_sql">
       
</textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="elementName" class="col-sm-2 control-label">列表Value字段</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="table_select2_value_record"
                                           placeholder="下拉框value值">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="elementName" class="col-sm-2 control-label">列表Text字段</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="table_select2_text_record"
                                           placeholder="下拉框显示的字段">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="elementName" class="col-sm-2 control-label">对应查询表的字段</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="table_select2_record"
                                           placeholder="(对应查询表的字段)">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="elementName" class="col-sm-2 control-label">开启下拉框联动</label>
                                <div class="col-sm-10">
                                    <div class="checkbox">
                                        <label propertyeditable="true">
                                            <input type="checkbox" id="dynamictable_select_change_enable">开启
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="elementName" class="col-sm-2 control-label">开启下拉框二</label>
                                <div class="col-sm-10">
                                    <div class="checkbox">
                                        <label propertyeditable="true">
                                            <input type="checkbox" id="table_select2_enable">开启下拉框二
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="elementName" class="col-sm-2 control-label">开启关键字查询</label>
                                <div class="col-sm-10">
                                    <div class="checkbox">
                                        <label propertyeditable="true">
                                            <input type="checkbox" id="table_keysearch_enable">开启
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="elementName" class="col-sm-2 control-label">关键字对应查询表的字段</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="table_keysearch_record"
                                           placeholder="(对应查询表的字段)">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="elementName" class="col-sm-2 control-label">开启日期范围查询</label>
                                <div class="col-sm-10">
                                    <div class="checkbox">
                                        <label propertyeditable="true">
                                            <input type="checkbox" id="table_dataesearch_enable">开启
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="elementName" class="col-sm-2 control-label">日期对应查询表的字段</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="table_dataesearch_record"
                                           placeholder="(日期对应查询表的字段)">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="modal-footer"><label  style="color:red; font-size:14px;" id="dynamicTable_info"></label> <a id="dynamicTable_propertiessave" class="btn btn-primary" >保存</a> <a class="btn" data-dismiss="modal">关闭</a> </div>
        </div>
    </div>
</div>

